<template>
	<view class="root-view">
			<view class="device-layout-block">
				<view class="device-layout-mod">
					<view class="device-layout-mhead" v-if="false">
						<evan-steps :active="1" direction="horizontal" primaryColor="#428cff">
							<evan-step></evan-step>
							<evan-step></evan-step>
							<evan-step></evan-step>
						</evan-steps>
						 <!-- <u-steps :list="numList" :current="0" mode="number" active-color="#428cff"></u-steps> -->
					</view>
					<view class="device-layout-mbody">
						<view class="textinfo-box">
							<view class="textinfo-title">请选择设备工作的WI-FI</view>
							<view class="textinfo-desc">此设备只支持家中使用2.4GHz Wi-Fi连接使用
	Wi-Fi名称仅支持英文字符及数字,请先确保手机端已连接2.4G的wifi</view>
						</view>
						<view class="uform-box u-p-b-64">
							<u-form class="u-border-top" :model="form" ref="uForm">
								<u-form-item left-icon="wifi">
									<u-input v-model="form.wifiName" type="text" :disabled="true" placeholder="请连接Wi-Fi" />
								</u-form-item>
								<u-form-item left-icon="lock-fill">
									<u-input v-model="form.wifiPassword" type="password" placeholder="输入WIFI密码" />
								</u-form-item>
							</u-form>
						</view>
						
					</view>
					<view class="device-layout-mfoot ">
						<view class="device-layout-btns">
							<view class="btn-cell">
								<button class="coco-btn theme round lg shadow" @click="startConfig();" :disabled="disabled">开始配网</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
</template>
<script>
import airkiss from "@/coco/gl-airkiss-wx.js";
import evanStep from '@/components/evan-steps/evan-step.vue';
export default {
	components:{
		evanStep
	},
	data() {
		return {
			ssid: '',
			password: '',
			ip:'255.255.255.255',
			result: '',
			checkResult:2,
			form: {
				wifiName: '',
				wifiPassword: '',
			}
		};
	},
	onLoad: function() {
		//#ifndef H5
		//获取WiFi信息
		this.getWifiInfo();
		this.checkResult = airkiss.checkSystem();
		console.log(this.checkResult);
		if(this.checkResult == 1) {
			var _self = this;
			wx.getLocalIPAddress({
			  success (res) {
				  console.log(res);
				  if(res.localip) {
					  let ips = res.localip.split(".");
					  _self.ip = ips[0]+"."+ips[1]+"."+ips[2]+".255";
				  }
			  }
			})
		}
		//配网过程保持屏幕常亮
		uni.setKeepScreenOn({
			keepScreenOn: true
		});
		//#endif
	},
	onUnload: function() {
		//#ifndef H5
		//关闭屏幕常亮
		uni.setKeepScreenOn({
			keepScreenOn: false
		});
		//#endif
	},
	methods: {
		getWifiInfo() {
			airkiss.getWifiInfo(function(res) {
				console.log("wifi", res);
				if(res.code==1) {
					this.form.wifiName = res.ssid;
				}
				this.result += JSON.stringify(res) + "\t";
			}.bind(this))
		},
		//开始配网
		startConfig : function() {
			if (!this.check() && this.checkResult != 0) {
				return;
			}
			uni.showLoading({
				title: '配网中...',
				mask: false
			});
			airkiss.startConfig(this.form.wifiName, this.form.wifiPassword, this.ip, function(res) {
				uni.hideLoading();
				if(res.code == 1) {
					this.msg('配网成功', 'success', 5000);
				}
				this.result += JSON.stringify(res) + "\t";
			}.bind(this))
		},
		//取消配网
		cancel: function() {
			airkiss.cancel();
			uni.hideLoading();
		},
		check: function() {
			if (this.form.wifiName == '') {
				this.msg('WiFi账号不能为空！');
				return false;
			}
			/* 支持空密码
			if (this.password == '') {
				this.msg('WiFi密码不能为空！');
				return false;
			} */
			return true;
		}
	}
};
</script>
<style lang="scss">
@import "./css/device.scss";
button::after {
	border: none !important;
}
.my-sbody {
	min-height: calc(100vh - var(--window-top) - var(--window-bottom));
}
.page-bg-color {
	background-color: #f5f6f7;
}
.page-full {
	flex: 1;
}
.my-margin {
	margin-left: 30rpx;
	margin-right: 30rpx;
} /* 左右外间距 */
.my-bg-white {
	background-color: #ffffff !important;
}
.my-form {
	padding: 30rpx 20rpx;
	border-radius: 16rpx;
}
.my-margin {
	margin-left: 30rpx;
	margin-right: 30rpx;
} /* 左右外间距 */
.my-margin-top {
	margin-top: 30rpx;
} /* 顶部外间距 */
.my-padding-top10 {
	padding-top: 10rpx;
}
.my-margin-top10 {
	margin-top: 10rpx;
} /* 顶部外间距 */
.my-margin-top-large {
	margin-top: 58rpx;
} /* 顶部外间距 大 */
.my-box-shadow {
	box-shadow: 0 0 12px rgba(207, 211, 222, 0.6);
}
.my-h6 {
	font-size: 28rpx;
	height: 50rpx;
	line-height: 50rpx;
}
.my-bold {
	font-weight: bold;
}
.my-form-item {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	background-color: #ffffff;
	padding: 0;
	margin-top: 10rpx;
}
.my-form-label {
	width: 160rpx;
	height: 100rpx;
	font-size: 30rpx;
	line-height: 100rpx;
	overflow: hidden;
}
.my-form-body {
	width: 200rpx;
	overflow: hidden;
	flex: 1;
}
.my-form-input {
	height: 40rpx;
	line-height: 40rpx;
	margin: 20rpx 0;
	background-color: rgba(255, 255, 255, 0);
	border-width: 0px;
	font-size: 30rpx;
}
.my-btns {
	display: flex;
	justify-content: space-between;
}
.my-border-b {
	border-bottom-style: solid;
	border-bottom-width: 1rpx;
	border-bottom-color: #f1f2f3;
}
.default-btn {
	background: #2e3033 !important;
	color: #ffffff !important;
	border-radius: 10rpx;
	width: 100%;
	margin-left: 10rpx;
}
.cancel-btn {
	background: #ffffff !important;
	color: #7a8087 !important;
	border-radius: 10rpx;
	border: 1px solid #dae1e8 !important;
	width: 100%;
	margin-right: 10rpx;
}
.my-textarea {
	width: 100%;
	padding: 30rpx 0;
}
.my-flex {
	display: flex;
}
.my-columns {
	flex-direction: column;
}
.required-a:after {
	content: '*';
	color: #ff0000;
	display: inline-block;
	vertical-align: sub;
	padding-left: 2px;
}
.bottom {
	position: fixed;
	bottom: 0;
	text-align: center;
	width: 100%;
	color: #666666;
	font-size: 28rpx;
	line-height: 50rpx;
	background-color: #f5f6f7;
	padding-bottom: 50rpx;
}
.bottom-link {
	display: flex;
	justify-content: center;
	align-items: baseline;
}
.btn-none {
	background-color: #f5f6f7;
	margin: 0;
	padding: 0;
	font-size: 28rpx;
	text-decoration: underline;
	color: #007aff;
	line-height: normal;
	&::after {
		display: none;
	}
}
</style>
